<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">提交</button>
    <script>
      // 5. 让一个字符串的首字母大写,比如 "hello every one"--->"Hello every one"

      var str = "hello every one";
      var str1 = str.substr(0, 1).toUpperCase() + str.substr(1, str.length - 1);
      console.log(str1);

      // 6. 让一个字符串所有单词的首字母大写,比如"hello every one"--->"Hello Every One"
      var str2 = "hello every one";
      var str3 = str2.split(" ");
      var str4 = "";
      for (let i = 0; i < str3.length; i++) {
        var index =
          str3[i].substr(0, 1).toUpperCase() +
          str3[i].substr(1, str.length) +
          " ";
        str4 += index;
      }
      var str5 = str4.substr(0, str4.length - 1);
      console.log(str5);

      //7. 数组去重的方法(3种)

      var arr = [1, 3, 1, 4, 5, 3, 6, 0, 4, 8, 15, 0];

      //方法一
      var newArr = [];

      //把第一个数组数值循环一遍
      for (var i = 0; i < arr.length; i++) {
        //先设一个开关
        var flag = true;
        //新数组也要循环一遍
        for (var j = 0; j < newArr.length; j++) {
          //将两个数组的值进行比较 以第一个数组的值比第二个数组所有的值
          if (arr[i] == newArr[j]) {
            flag = false;
            break;
            //有相同的数值就会停止循环 开关就变成false
          }
        }
        if (flag) {
          newArr[newArr.length] = arr[i];
          //当两个值不相等就是false，开关始终就是true 执行true的代码
        }
      }
      console.log(newArr);

      // 方法二
      var newArr2 = [...new Set(arr)];
      console.log(newArr2);

      // 方法三
      var newArr3 = [];
      var newobj = {};
      for (var i = 0; i < arr.length; i++) {
        newobj[arr[i]] = "1";
      }
      for (key in newobj) {
        newArr3.push(+key);
      }
      console.log(newArr3);

      /*       8. 封装一个myNew函数实现new操作符,如下,让p1和p2有一样的效果
            ```js
                function Person(name,age){
                this.name = name;
                this.age = age;
                }
                Person.prototype.do = function(){}

                //原始new
                const p1 = new Person("xiaowang",18);
                //手动封装new
                const p2 = myNew(Person,"xiaowang",18);
      ``` */

      const myNew = function () {
        // 创建一个空对象
        // var obj = {}; 和下面的是同样的效果
        var obj = new Object();
        // 获得一个构造函数
        // Constructor = [].shift.apply(arguments);
        Constructor = [].shift.call(arguments);
        // 将构造函数的原型对象，作为新对象的原型对象
        obj.__proto__ = Constructor.prototype;
        // 绑定this，让this指向新的对象
        // var ret = Constructor.apply(obj,arguments)
        // var ret = Constructor.call(obj,arguments[0],arguments[1],arguments[2])
        var ret = Constructor.call(obj, ...arguments);
        // 确保 使用new返回的是一个 object 对像
        return typeof ret === "object" ? ret : obj;
      };

      function Person(name, age, sex) {
        this.name = name;
        this.age = age;
      }

      // 通过手写new ，就是objectFactory()方法创建的实例
      const obj1 = myNew(Person, "xiaowang", 18);
      console.log(obj1);

      // 通过new创建的构造实例
      const obj2 = new Person("xiaowang", 18);
      console.log(obj2);

      //9. 让一个不定宽高的元素在容器中水平垂直居中的方式(3种方式)
      //方式1
      // text-align:center; vertical-align: middle;
      //方式2
      /* 
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
      */
      // 方式3
      /* 
            display: flex;
            justify-content: center;
            align-items: center;
     */

      //  10. 给按钮绑定点击事件,频繁点击按钮时让事件最少间隔1s才能触发一次(节流),并且封装通用函数

      function throttle(fn, delay) {
        var startTime = new Date().getTime();
        return function () {
          //console.log(this);
          var endTime = new Date().getTime();
          if (endTime - startTime > delay) {
            fn.call(this);
            startTime = new Date().getTime();
          }
        };
      }
      document.querySelector(".btn").onclick = throttle(function () {
        console.log("点击了按钮");
      }, 1000);
    </script>
  </body>
</html>
